<script lang="ts">

export default {
  data() {
    return {
      show: false,
      item:{
        content: ''
      },
      scale: 1,
      // 透明度
      opacity: 0,
      // 是否在open中
      isOpening: false,
      // 是否在close中
      isClosing: false
    }
  },
  mounted() {
    // 监听esc键
    document.onkeydown = (e) => {
      if (e.key === 'Escape') {
        this.close();
      }
    }
  },
  methods: {
    // 透明度从0到1
    opacity0To1() {
      this.opacity = 0;
      let interval = setInterval(() => {
        this.opacity += 0.1;
        if (this.opacity >= 1) {
          clearInterval(interval);
        }
      }, 20);
    },
    // 透明度从1到0
    opacity1To0() {
      this.opacity = 1;
      let interval = setInterval(() => {
        this.opacity -= 0.1;
        if (this.opacity <= 0) {
          this.show = false;
          this.isClosing = false;
          clearInterval(interval);
        }
      }, 20);
    },

    open(item) {
      if (this.isClosing||this.isOpening) {
        return;
      }
      this.isOpening = true;
      this.item = item;
      this.show = true;
      this.scale = 0;
      this.opacity0To1();
      let interval = setInterval(() => {
        this.scale += 0.1;
        if (this.scale >= 1) {
          this.isOpening = false;
          clearInterval(interval);
        }
      }, 20);
    },
    close() {
      if (this.isClosing||this.isOpening) {
        return;
      }
      this.isClosing = true;
      this.scale = 1;
      let interval = setInterval(() => {
        this.scale -= 0.1;
        if (this.scale <= 0) {
          this.opacity1To0();
          clearInterval(interval);
        }
      }, 20);
    },
    getHtml(item) {
      let html = item.content;
      // 如果不是html
      if (!item.isHtml) {
        // 将文字大小改为28px，因为做了全局缩小，所以这里要放大
        html = "<div style='font-size: 36px'>" + html + "</div>";
        return html;
      }

      // 修改滚动条样式
      html = html + "<style>::-webkit-scrollbar{width: 5px;height: 5px;}::-webkit-scrollbar-thumb{background-color: #666666;border-radius: 5px;}</style>";
      return html;
    },

  }

}

</script>

<template>
  <div
    v-if="show"
    class="html-view-dialog" >
    <div class="back"
         @click="close()"
    :style="'opacity:' + opacity"
    ></div>
    <div
        :style="'transform: translate(-50%, -50%) scale(' + scale + ')'"
        class="iframe-box">
      <div class="iframe-box-header" style="text-align: left">
        <span>HTML预览</span>
        <span
        style="float: right;cursor: pointer;color: #666666;font-size: 12px"
        >按ESC键退出</span>
      </div>
      <iframe
          class="iframe"
          :srcdoc="getHtml(item)">
      </iframe>
    </div>
  </div>
</template>

<style scoped lang="scss">
.html-view-dialog{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.iframe-box {
  position: absolute;
  width: 80%;
  height: 80%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px 10px 0 0;
}

.iframe-box-header{
  padding: 10px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  border-radius: 10px 10px 0 0;
}

.iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>